<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/bootstrap.js"></script>
		<script type="text/javascript">
			//当前页
			let currentPage = 1;
			//每页显示条数
			let pageSize = 1;
			//总页数
			let totalPage = 0;
			//总条数
			let totalNum = 0;
			//搜索结果
			let searchList;

			function getUserList(currentPage, pageSize, userList) {
				//开始下标
				let startIndex = (currentPage - 1) * pageSize;
				//结束下标
				let endIndex = currentPage * pageSize;
				if (userList == null) {
					userList = localStorage.getItem("user");
					userList = JSON.parse(userList);
				}
				//总页数
				totalPage = Math.ceil(userList.length / pageSize);
				$('.totalPage').html(totalPage);
				//总条数
				totalNum = userList.length;
				$('.totalNum').html(totalNum);
				$('.currentPage').html(currentPage);
				//分页数据
				userList = userList.slice(startIndex, endIndex);
				let table = `<table class="table table-bordered">`;
				let th = `<tr>
				        <th>ID</th>
						<th>邮箱</th>
						<th>昵称</th>
						<th>密码</th>
						<th>操作</th>
					</tr>`;
				let trs = ``;
				userList.forEach(function(val, index, arry) {
					let tr = `<tr>
				            <td>${val.id}</td>
				    		<td>${val.email}</td>
				    		<td>${val.nickname}</td>
							<td>${val.password}</td>
				    		<td><button type="button" class="btn btn-info btn-xs edit">修改</button>
				    		<button type="button" class="btn btn-danger btn-xs delete">删除</button></td>
				    	</tr>`;
					trs += tr;
				});
				$('.user').empty();
				$('.user').append(table + th + trs);
			}
			$(document).ready(function() {
				getUserList(currentPage, pageSize);
				$('#prev').click(function() {
					if (currentPage > 1) {
						currentPage--;
						getUserList(currentPage, pageSize);
					}

				});
				$('#next').click(function() {
					if (currentPage < totalPage) {
						currentPage++;
						getUserList(currentPage, pageSize);
					}
				})
				//搜索
				$('.glyphicon-search').click(function() {
					let searchName = $('#search').val();
					if (searchName != null || searchName != '' || searchName != undefined) {
						let userList = localStorage.getItem("user");
						userList = JSON.parse(userList);
						searchList = userList.filter(function(val) {
							return val.nickname.includes(searchName);
						});
						getUserList(currentPage, pageSize, searchList);
					} else {
						getUserList(1, pageSize);
					}
				})
				//保存用户
				$('.save').click(function() {
					const user = {
						id: Math.ceil(Math.random() * 10000),
						email: $('#email').val(),
						nickname: $('#nickname').val(),
						password: $('#password').val()
					};

					let userList = localStorage.getItem("user");
					userList = JSON.parse(userList);
					userList.push(user);
					localStorage.setItem("user", JSON.stringify(userList));
					$('#exampleModal').modal('hide');
					getUserList(currentPage, pageSize);
				})
			})
		</script>
		<style type="text/css">
			.row {
				margin: 10px 0px;
			}

			.table {
				margin-bottom: 0px;
			}

			.pagination {
				margin-left: 15px;
			}
		</style>
	</head>
	<body>
		<!-- [{"id":1,"email":"zhangsan@163.com","nickname":"张三","password":"123"}] -->
		<div class="row">
			<div class="col-md-12">
				<form class="form-inline">
					<div class="form-group">
						<input type="text" class="form-control" id="search" placeholder="输入搜索用户邮箱">
					</div>
					<div class="form-group">
						<button type="button" class="btn btn-primary glyphicon glyphicon-search"></button>
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
							data-whatever="@mdo">添加用户</button>
					</div>
				</form>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 user">

			</div>
			<ul class="pagination">
				<li>
					<a href="#" aria-label="Previous" id="prev">
						<span aria-hidden="true">上一页</span>
					</a>
				</li>
				<li>
					<a href="#" aria-label="Next" id="next">
						<span aria-hidden="true">下一页</span>
					</a>
				</li>
				<li class="disabled">
					<span>第<span class="currentPage"></span>/<span class="totalPage"></span>页</span>
				</li>
				<li class="disabled">
					<span>共<span class="totalNum"></span>条</span>
				</li>
			</ul>
		</div>
		<!-- 添加商品模态框 -->
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">添加用户</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<input type="text" class="form-control" id="email" placeholder="用户邮箱">
							</div>
							<div class="form-group">
								<input type="text" class="form-control" id="password" placeholder="用户密码">
							</div>
							<div class="form-group">
								<input type="text" class="form-control" id="nickname" placeholder="用户昵称">
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary save">保存</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
